import { useTranslation } from 'react-i18next';
import { Helmet } from 'react-helmet-async';
import { motion } from 'framer-motion';
import { Header } from '@/components/Header';
import { Footer } from '@/components/Footer';
import { useSEOConfig, generateHreflangTags, generateStructuredData } from '@/lib/seo';

export default function CrossBorderPayment() {
  const { t } = useTranslation();
  const seoConfig = useSEOConfig({
    title: `${t('header.crossBorderPayment')} - 豆豆Pay`,
    description: t('seo.pages.crossBorderPayment.description')
  });
  const hreflangTags = generateHreflangTags('/cross-border-payment');
  const structuredData = generateStructuredData(seoConfig, 'website');

  // 服务优势
  const advantages = [
    {
      title: t('crossBorder.advantage1Title'),
      description: t('crossBorder.advantage1Desc'),
      icon: 'fa-bolt'
    },
    {
      title: t('crossBorder.advantage2Title'),
      description: t('crossBorder.advantage2Desc'),
      icon: 'fa-percentage'
    },
    {
      title: t('crossBorder.advantage3Title'),
      description: t('crossBorder.advantage3Desc'),
      icon: 'fa-shield-alt'
    },
    {
      title: t('crossBorder.advantage4Title'),
      description: t('crossBorder.advantage4Desc'),
      icon: 'fa-globe-asia'
    }
  ];

  // 服务流程
  const processSteps = [
    {
      step: 1,
      title: t('crossBorder.process1Title'),
      description: t('crossBorder.process1Desc')
    },
    {
      step: 2,
      title: t('crossBorder.process2Title'),
      description: t('crossBorder.process2Desc')
    },
    {
      step: 3,
      title: t('crossBorder.process3Title'),
      description: t('crossBorder.process3Desc')
    },
    {
      step: 4,
      title: t('crossBorder.process4Title'),
      description: t('crossBorder.process4Desc')
    }
  ];

  // 支持币种
  const currencies = [
    { code: 'CNY', name: t('crossBorder.currencyCNY') },
    { code: 'JPY', name: t('crossBorder.currencyJPY') },
    { code: 'USD', name: t('crossBorder.currencyUSD') },
    { code: 'EUR', name: t('crossBorder.currencyEUR') },
    { code: 'GBP', name: t('crossBorder.currencyGBP') },
    { code: 'HKD', name: t('crossBorder.currencyHKD') }
  ];

  return (
    <div className="min-h-screen flex flex-col bg-white">
      <Helmet>
        {/* Basic Meta Tags */}
        <title>{seoConfig.title}</title>
        <meta name="description" content={seoConfig.description} />
        <meta name="keywords" content={seoConfig.keywords} />

        {/* Canonical URL */}
        <link rel="canonical" href={seoConfig.url} />

        {/* Open Graph / Facebook */}
        <meta property="og:title" content={seoConfig.title} />
        <meta property="og:description" content={seoConfig.description} />
        <meta property="og:image" content={seoConfig.image} />
        <meta property="og:url" content={seoConfig.url} />
        <meta property="og:locale" content={seoConfig.locale} />
        <meta property="og:site_name" content={seoConfig.siteName} />

        {/* Twitter */}
        <meta name="twitter:title" content={seoConfig.title} />
        <meta name="twitter:description" content={seoConfig.description} />
        <meta name="twitter:image" content={seoConfig.image} />

        {/* Hreflang tags for multilingual SEO */}
        {hreflangTags.map((tag, index) => (
          <link key={index} rel={tag.rel} hrefLang={tag.hreflang} href={tag.href} />
        ))}

        {/* Structured Data */}
        <script type="application/ld+json">
          {JSON.stringify(structuredData)}
        </script>
      </Helmet>
      
      <Header />
      
      <main className="flex-grow">
        {/* 页面标题区域 */}
        <section className="py-16 md:py-24 bg-gradient-to-r from-purple-50 to-indigo-50">
          <div className="container mx-auto px-4">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8 }}
              className="max-w-3xl mx-auto text-center"
            >
              <h1 className="text-3xl md:text-5xl font-bold text-gray-900 mb-6">
                {t('header.crossBorderPayment')}
              </h1>
              <div className="w-20 h-1 bg-purple-500 mx-auto mb-8 rounded-full"></div>
              <p className="text-lg md:text-xl text-gray-700 leading-relaxed">
                {t('crossBorder.intro')}
              </p> 
            </motion.div>
          </div>
        </section>
        
        {/* 服务概述 */}
        <section className="py-20 bg-white">
          <div className="container mx-auto px-4">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
              <motion.div
                initial={{ opacity: 0, x: -30 }}
                whileInView={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.8 }}
                viewport={{ once: true }}
              >
                <h2 className="text-2xl md:text-3xl font-bold text-gray-900 mb-6">
                  {t('crossBorder.overviewTitle')}
                </h2>
                <div className="w-16 h-1 bg-purple-500 mb-8 rounded-full"></div>
                <div className="space-y-4 text-gray-700">
                  <p className="leading-relaxed">{t('crossBorder.overviewPara1')}</p>
                  <p className="leading-relaxed">{t('crossBorder.overviewPara2')}</p>
                  <p className="leading-relaxed">{t('crossBorder.overviewPara3')}</p>
                </div>
                
                <div className="mt-10">
                  <a 
                    href="#" 
                    className="inline-block px-6 py-3 bg-purple-600 hover:bg-purple-700 text-white font-medium rounded-md transition-colors shadow-md hover:shadow-lg"
                  >
                    {t('crossBorder.applyNow')}
                  </a>
                </div>
              </motion.div>
              
              <motion.div
                initial={{ opacity: 0, x: 30 }}
                whileInView={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.8, delay: 0.3 }}
                viewport={{ once: true }}
                className="relative"
              >
                <div className="rounded-xl overflow-hidden shadow-2xl">
                  <img 
                    src="https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=cross-border%20payment%20service%2C%20international%20money%20transfer%2C%20currency%20exchange%2C%20global%20payment%20network&sign=d4ec3a9953c7072e1c68cd2c9f723d6c" 
                    alt={t('header.crossBorderPayment')} 
                    className="w-full h-auto"
                  />
                </div>
                <div className="absolute -bottom-6 -right-6 w-40 h-40 bg-purple-100 rounded-full -z-10"></div>
                <div className="absolute -top-6 -left-6 w-24 h-24 bg-indigo-100 rounded-full -z-10"></div>
              </motion.div>
            </div>
          </div>
        </section>
        
        {/* 服务优势 */}
        <section className="py-20 bg-gray-50">
          <div className="container mx-auto px-4">
            <div className="text-center max-w-3xl mx-auto mb-16">
              <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                {t('crossBorder.advantagesTitle')}
              </h2>
              <div className="w-20 h-1 bg-purple-500 mx-auto mb-8 rounded-full"></div>
              <p className="text-gray-700">
                {t('crossBorder.advantagesDesc')}
              </p>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
              {advantages.map((advantage, index) => (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, y: 30 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: index * 0.1 }}
                  viewport={{ once: true }}
                  className="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1"
                >
                  <div className="w-14 h-14 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mb-6">
                    <i className={`fa-solid ${advantage.icon} text-2xl`}></i>
                  </div>
                  <h3 className="text-xl font-bold text-gray-900 mb-3">
                    {advantage.title}
                  </h3>
                  <p className="text-gray-600">
                    {advantage.description}
                  </p>
                </motion.div>
              ))}
            </div>
          </div>
        </section>
        
        {/* 服务流程 */}
        <section className="py-20 bg-white">
          <div className="container mx-auto px-4">
            <div className="text-center max-w-3xl mx-auto mb-16">
              <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                {t('crossBorder.processTitle')}
              </h2>
              <div className="w-20 h-1 bg-purple-500 mx-auto mb-8 rounded-full"></div>
              <p className="text-gray-700">
                {t('crossBorder.processDesc')}
              </p>
            </div>
            
            <div className="relative">
              {/* 连接线 */}
              <div className="hidden md:block absolute top-[calc(50%-0.5cm)] left-0 w-full h-1 bg-purple-200 -translate-y-1/2 z-0"></div>
              
              <div className="grid grid-cols-1 md:grid-cols-4 gap-8 relative z-10">
                {processSteps.map((step) => (
                  <motion.div
                    key={step.step}
                    initial={{ opacity: 0, y: 30 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.5, delay: (step.step - 1) * 0.2 }}
                    viewport={{ once: true }}
                  >
                    <div className="flex flex-col items-center text-center">
                      <div className="w-16 h-16 rounded-full bg-purple-600 text-white flex items-center justify-center font-bold text-xl mb-6 shadow-lg">
                        {step.step}
                      </div>
                      <h3 className="text-xl font-bold text-gray-900 mb-3">
                        {step.title}
                      </h3>
                      <p className="text-gray-600">
                        {step.description}
                      </p>
                    </div>
                  </motion.div>
                ))}
              </div>
            </div>
          </div>
        </section>
        
        {/* 支持币种 */}
        <section className="py-20 bg-gray-50">
          <div className="container mx-auto px-4">
            <div className="text-center max-w-3xl mx-auto mb-16">
              <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                {t('crossBorder.currenciesTitle')}
              </h2>
              <div className="w-20 h-1 bg-purple-500 mx-auto mb-8 rounded-full"></div>
              <p className="text-gray-700">
                {t('crossBorder.currenciesDesc')}
              </p>
            </div>
            
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8 }}
              viewport={{ once: true }}
              className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-6"
            >
              {currencies.map((currency, _index) => (
                <div 
                  key={currency.code}
                  className="bg-white p-6 rounded-xl shadow-md text-center hover:shadow-lg transition-shadow"
                >
                  <div className="text-3xl font-bold text-gray-900 mb-2">{currency.code}</div>
                  <div className="text-gray-600">{currency.name}</div>
                </div>
              ))}
            </motion.div>
          </div>
        </section>
        
        {/* 联系咨询 */}
        <section className="py-20 bg-purple-600 text-white">
          <div className="container mx-auto px-4 text-center">
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8 }}
              viewport={{ once: true }}
            >
              <h2 className="text-3xl md:text-4xl font-bold mb-6">
                {t('crossBorder.ctaTitle')}
              </h2>
              <p className="text-xl text-purple-100 max-w-2xl mx-auto mb-10">
                {t('crossBorder.ctaDesc')}
              </p>
              <div className="flex flex-col sm:flex-row justify-center gap-4">
                <a 
                  href="/contact" 
                  className="px-8 py-4 bg-white text-purple-600 font-medium rounded-md hover:bg-purple-5 transition-colors shadow-lg"
                >
                  {t('crossBorder.contactBtn')}
                </a>
                <a 
                  href="#" 
                  className="px-8 py-4 bg-transparent border-2 border-white text-white font-medium rounded-md hover:bg-purple-700 transition-colors"
                >
                  {t('crossBorder.demoBtn')}
                </a>
              </div>
            </motion.div>
          </div>
        </section>
      </main>
      
      <Footer />
    </div>
  );
}